import React from "react";
import App from "./App";
import {Link, Redirect, Route} from "react-router-dom";
import {connect} from "react-redux";
import {logout} from "./Auth.redux";

function ErYing(){
    return <h2>二营</h2>;
}
function QiBingLian(){
    return <h2>骑兵连</h2>;
}

@connect(
    state => state,
    { logout }
)
class Dashboard extends React.Component{
    render(){
        const path = this.props.match.path;
        const redirectToLogin = <Redirect to="/login"/>;
        const app = (
            <div>
                <h1>独立团管理系统</h1>
                {this.props.auth.isAuth?<button onClick={this.props.logout}>注销</button>:null}
                <ul>
                    <li>
                        <Link to={`${path}/`}>一营</Link>
                    </li>
                </ul>
                <ul>
                    <li>
                        <Link to={`${path}/erying`}>二营</Link>
                    </li>
                </ul>
                <ul>
                    <li>
                        <Link to={`${path}/qibinglian`}>骑兵连</Link>
                    </li>
                </ul>
                <Route path={`${path}/`} exact component={App}/>
                <Route path={`${path}/erying`} component={ErYing}/>
                <Route path={`${path}/qibinglian`} component={QiBingLian}/>
            </div>
        );
        return this.props.auth.isAuth? app: redirectToLogin;
    }
}

export default Dashboard;